<!--
 * @description 直播列表组件
 * @date 2022/11/12
 -->
<template>
  <div
    id="liveList"
    class="live-list-comp"
    :style="{marginTop:top,backgroundColor:bgcolor,paddingLeft: spacing, paddingRight: spacing}"
    :class="{'have-list':list.length>0 }"
  >
    <!--  往期直播-->
    <div class="previous-main">
      <cell-title
        v-if="option.isShowModuleName"
        :title="moduleName"
        :hide-desc="true"
        :option="option"
        :style="{
          'background-color': option.backgroundColor,
          'border-radius':
            option.radiusSize + ' ' + option.radiusSize + ' 0 0',
        }"
      />
      <div class="p-list-box">
        <empty-page
          v-if="isNoData && !loading && !isLoading"
          z-index="0"
          :empty-type="0"
        />
        <van-pull-refresh
          v-model="isLoading"
          @refresh="onRefresh"
        >
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="finishedText"
            :immediate-check="false"
            :offset="20"
            @load="onLoad"
          >
            <div v-for="(item,i) in list" :key="i" class="p-item">
              <van-image :src="setImgPath(item.images,item.imagesUrl)" :fit="imgType">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <template v-slot:error>
                  <img src="../../images/base/default-placeholder.png" alt="">
                </template>
              </van-image>
              <div class="info">
                <div class="i-time">
                  {{ formatTime(item.liveStartTime, 4) }}
                </div>
                <div class="i-title clamp2">{{ item.liveName || "" }}</div>
                <div v-if="item.isEnterPlayback" class="play-back" @click.stop="playBack(item)">查看回放</div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from './../mixins'
import mixin from './mixins'
import CellTitle from '@/components/CustomPage/apps/widget/characters/cellTitle'

export default {
  name: 'LiveListComp',
  components: {
    CellTitle
  },
  mixins: [mixins, mixin],
  props: {
    option: {
      type: Object,
      default: () => ({})
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      page: 1,
      pageSize: 8,
      total: 0,
      isNoData: false,
      isLoadError: false,
      loading: false, // 是否处于加载状态
      finished: false, // 是否已加载完所有数据
      isLoading: false, // 是否处于下拉刷新状态
      finishedText: '已经到底了',
      backUrl: '/index',
      errorDialog: false,
      noLoginDialog: false,
      hide: false,
      scrollTop: 0,
      backId: '',
      list: []
    }
  },
  computed: {
    bgcolor() {
      return this.option.bgcolor || '#fff'
    },
    bgcolorLine() {
      return this.option.bgcolorLine || ''
    },
    isShowModuleName() {
      return this.option.isShowModuleName
    }

  },
  async created() {
    if (this.isInitData) {
      await this.seflLoadData()
    } else {
      this.list = [
        {
          id: '',
          imagesUrl: '',
          liveStartTime: '2022/11/05 12:00',
          liveEndTime: '2022/11/06 12:30',
          liveName: '直播活动',
          isBook: '1',
          bookNum: '0',
          roomStatus: 'ZBZT_ZBYY',
          isEnterPlayback: '0'
        },
        {
          id: '',
          imagesUrl: '',
          liveStartTime: '2022/11/05 12:00',
          liveEndTime: '2022/11/06 12:30',
          liveName: '直播活动',
          isBook: '1',
          bookNum: '0',
          roomStatus: 'ZBZT_ZBYY',
          isEnterPlayback: '0'
        },
        {
          id: '',
          imagesUrl: '',
          liveStartTime: '2022/11/05 12:00',
          liveEndTime: '2022/11/06 12:30',
          liveName: '欢度国庆',
          isBook: '1',
          bookNum: '0',
          roomStatus: 'ZBZT_ZBYY',
          isEnterPlayback: '0'
        },
        {
          id: '',
          imagesUrl: '',
          liveStartTime: '2022/11/05 12:00',
          liveEndTime: '2022/11/06 12:30',
          liveName: '直播活动',
          isBook: '1',
          bookNum: '0',
          roomStatus: 'ZBZT_ZBYY',
          isEnterPlayback: '0'
        }
      ]
      this.finished = true
    }
  },
  methods: {
    setData(result) {
      const res = result.dataList
      const { rows, total } = res.data || {}
      this.list.push(...rows)
      this.loading = false
      this.isLoading = false
      this.isNoData = total < 1
      if (this.isNoData) {
        this.finishedText = ''
      } else {
        this.finishedText = '已经到底了'
      }
      if (this.list.length >= total) {
        this.finished = true
      } else {
        this.finished = false
      }
    },
    playBack(item) {
      return
      if (item.isEnterPlayback === 1) {
        this.handleView(item)
      } else if (item.isEnterPlayback > 1) {
        this.$router.push({ path: '/live/playBack', query: { id: item.id }})
      }
    },
    /**
     * 加载数据
     */
    async seflLoadData() {
      await this.getDataByCode('dataList')
    },
    /**
     * 上拉加载
     */
    onLoad() {
      this.page++
      this.seflLoadData()
    },

    /**
     * 下拉刷新
     */
    onRefresh() {
      this.finished = false
      this.page = 1
      this.list = []
      this.seflLoadData()
    },
    onChange(e) {
      this.curIndex = e
    },
    formatTime(time, num) {
      if (!time) {
        return
      }
      const d = new Date(time.replace(/-/g, '/'))
      if (num === 3) {
        return (
          d.getFullYear() + '年' +
            (d.getMonth() + 1) +
            '月' +
            d.getDate() +
            '日'
        )
      } else if (num === 4) {
        return (
          d.getFullYear() + '年' +
            (d.getMonth() + 1) +
            '月' +
            d.getDate() +
            '日' + ' ' + (d.getHours() < 10 ? `0${d.getHours()}` : `${d.getHours()}`) + ':' + (d.getMinutes() < 10 ? `0${d.getMinutes()}` : `${d.getMinutes()}`)
        )
      } else {
        return (
          (d.getMonth() + 1) +
            '月' +
            d.getDate() +
            '日'
        )
      }
    },
    getTime(time) {
      return time ? time.substring(0, 10) : ''
    },
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`
    }

    // height() {
    //   return this.px2rem(this.option.height || 88)
    // },
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/utility/rem.scss';

.live-list-comp {
  margin: 0 auto;
  position: relative;
  width: rem(750);

  .previous-main {

    .p-list-box {
      position: relative;

      /deep/ .van-pull-refresh {

        .p-item {
          position: relative;
          min-height: rem(230);
          background: #ffffff;
          border-radius: rem(16);
          margin-bottom: rem(20);
          padding: rem(20);
          display: flex;

          img {
            border-radius: rem(16);
          }

          .van-image {
            display: inline-block;
            width: rem(320);
            height: rem(180);
            background: #f6f9ff;
            border-radius: rem(16);

            .van-image__error {
              > img {
                width: rem(120);
                height: rem(120);
              }
            }
          }

          .info {
            flex: 1;
            width: 0;
            padding: rem(0) rem(22);

            .i-time {
              font-size: rem(24);
              font-family: PingFang SC Regular, PingFang SC Regular-Regular;
              font-weight: 400;
              text-align: left;
              color: #666666;
            }

            .i-title {
              min-height: rem(60);
              max-height: rem(86);
              margin-top: rem(15);
              font-size: rem(30);
              font-family: PingFang SC Medium, PingFang SC Medium-Medium;
              font-weight: bold;
              text-align: left;
              color: #333333;
              overflow: hidden;
              text-overflow: ellipsis; // text-overflow css3的属性，当文本溢出时，显示省略号
              display: -webkit-box;
              -webkit-line-clamp: 2; // 设置两行文字溢出
              -webkit-box-orient: vertical;
            }

            .play-back {
              margin-top: rem(15);
              display: flex;
              align-items: center;
              justify-content: center;
              float: right;
              //position: absolute;
              //right: rem(30);
              //bottom: rem(20);
              width: rem(132);
              height: rem(54);
              @include bg-color($mainColor);
              border-radius: rem(27);
              font-size: rem(24);
              font-family: PingFang SC Medium, PingFang SC Medium-Medium;
              font-weight: bold;
              text-align: center;
              color: #ffffff;
            }

            .i-subscribe {
              margin-top: rem(15);
              font-size: rem(26);
              font-family: PingFang SC Regular, PingFang SC Regular-Regular;
              font-weight: 400;
              color: #444444;

              > span {
                display: inline-block;
              }

              .img {
                vertical-align: middle;
                margin-right: rem(15);

                > img {
                  width: rem(22);
                  height: rem(28);
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
